<template>
    <div class="goods">
      <ul class="goods-content">
        <ul v-for="(goods, index) in currGoods" :key="index">
            <li class="goods-item" v-if="index < currGoods.length - 1" @click="jumpToDetail(goods.id)">
                <img :src="goods.image" alt="" />
                <h3 class="goods-name">{{ goods.name }}</h3>
                <p class="goods-price">{{ goods.price }}</p>
                <p class="goods-description">{{ goods.description }}</p>
                <p class="goods-stock">{{ goods.stock }}</p>
            </li>
        </ul>
        <ul class="goods-small">
          <template v-if="lastGoods">
            <li class="item-small" @click="jumpToDetail(lastGoods.id)">
                <div class="desc">
                  <h3 class="name" style="font-size:14px"> {{ lastGoods.name }} </h3>
                  <span class="price"> {{ lastGoods.price }}</span>
                </div>
                <img class="small-img" :src="lastGoods.image" alt="" />
            </li>
            <li class="item-small read-more" @click="viewMore()">
              <a :href="lastGoods.image" target="_blank" >
                <div class="desc" style=" margin-top: 2px;">
                  <h3 class="name">  浏览更多 </h3>

                </div>
                <div class="big_icon"><img src="@/assets/jiantou.png"/></div>
              </a>
            </li>
          </template>
        </ul>
      </ul>
    </div>
  </template>
  
  <script>
  import bus from '@/utils/Bus'
  export default {
    props: {
      currGoods: {
        required: true,
        type: Array
      }
    },
    computed: {
      lastGoods: function() {
        if (this.currGoods && this.currGoods.length > 0) {
          return this.currGoods[this.currGoods.length - 1]
        } else {
          return null
        }
      }
    },
    methods:{
      viewMore(){
        bus.emit("viewMore")
      },
      jumpToDetail(itemId){
        this.$router.push({name:"ItemDetail",query:{id:itemId}})
      }
    }
  }
  </script>
  
  <style scoped>
  .goods {
    float: left;
    width: 1226px;
    height: 975px;
    margin-left:-6px;
    margin-top:14px;
    position:absolute;
  }
  .goods .goods-content {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 1240px;
    margin-left:-56px;
    margin-top:0px;
  }
  .goods-item {
    position: relative;
    margin: 0 0 14px 14px;
    padding: 23px 0;
    width: 234px;
    height: 255px;
    margin-left:-26px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
    list-style:none;
  }
  .goods-item:hover {
    transform: translateY(-1px);
    box-shadow: 5px 5px 20px #ccc;
  }
  
  .goods-item .discount-label {
    position: absolute;
    top: 0;
    left: 50%;
    width: 64px;
    height: 20px;
    line-height: 20px;
    margin-left: -32px;
    font-size: 12px;
    text-align: center;
    color: #fff;
    z-index: 4;
  }
  .goods-item .discount-label .free {
    background-color: #ffac13;
  }
  .goods-item .discount-label .new {
    background-color: #83c44e;
  }
  .goods-item .discount-label .discount {
    background-color: #e53935;
  }
  .goods-item img {
    display: block;
    width: 160px;
    height: 160px;
    margin: 0 auto;
  }
  .goods-item .goods-name {
    font-size: 14px;
    color: #333;
    font-weight: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    margin-left: 15px;
  }
  .goods-item .goods-price {
    color: #ff6700;
    font-size: 14px;
    font-weight: bold;
    margin-top: -7px;
    margin-left: 15px;
  }
  .goods-item .goods-description {
    margin-top:-5px;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #b0b0b0;
    text-align:left;
    margin-left: 15px;
  }
  .goods-item .goods-stock {
    margin-top:-4px;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #b0b0b0;
    text-align:left;
    margin-left: 15px;
  }
  .goods-small {
    width: 234px;
    height: 260px;
    position:relative;
    margin-top:-315px;
    margin-left:952px;
    list-style:none;
  }
  .goods-small .item-small {
    width: 234px;
    height: 143px;
    margin: 0 0 14px 14px;
    padding: 30px 0 0 30px;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
  }
  .goods-small .item-small:hover {
    transform: translateY(-1px);
    box-shadow: 5px 5px 20px #ccc;
  }
  .goods-small .item-small .desc {
    float: left;
    width: 100px;
    height: 100%;
    margin: 20px;
    margin-top: 10px;
  }
  .goods-small .item-small .desc .name {
    font-size: 18px;
    text-align: left;
    color: rgb(77, 73, 73);
    font-weight: normal;
  }
  .goods-small .item-small .desc .price {
    display: block;
    width: 100%;
    color: #ff6700;
    font-size: 14px;
    text-align: left;
  }
  .goods-small .item-small .small-img {
    float: left;
    width: 80px;
    height: 80px;
    position: absolute;
    margin-left: -54px;
  }
  .goods-small .big_icon {
    position: absolute;
    margin-top: 7px;
    margin-left: 125px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    text-align: center;
  }
  </style>
  